<template>
  <ul id="hospital" class="waterfall">
      <li class="hospital-box" v-for="(hospital,index) in hospital_list" :key="index">
          <div class="img-container pic-container">
              <img :src="hospital.logo" alt="">
          </div>
          <div class="info">
              <h4>{{ hospital.hospital_name }}</h4>
              <span class="light-gray">{{ hospital.hospital_type_name  }}</span>
              <div>
                  <router-link target='_blank' class="orange-bg" to=''>眼部</router-link>
              </div>
              <p>{{ hospital.address }}</p>
          </div>
      </li>

  </ul>
</template>
<script>
    export default{
        props:{
            width:{
                // default:
            },
            hospital_list:{
                type: Array,
            },
            waterFall:{
                type: Function
            }
        },
        mounted(){
            $("#hospital").waterfall({
                itemClass: ".hospital-box",
                minColCount: 1,
                spacingHeight: 40,
                spacingWidth:40,
                resizeable: true,
                itemAlign:'left',
                ajaxCallback: (success,end)=> {
                    this.waterFall();
                    // success();  这个方法不用调用，不然会有问题
                    end();
                }
            });
        },
        beforeDestroy(){
            window.onscroll = null;
        }
    }
</script>
<style lang="less" scoped>
   ul{
       overflow: hidden;
       li{
           float: left;
           width: 546px;
           margin-right: 40px;
           margin-bottom: 40px;
           >div{
            float: left;
           }
           .pic-container{
               width: 150px;
               height: 150px;
               margin-right: 20px;
           }
           .info{
                width: 370px;
                min-height: 150px;
                position: relative;
                padding-bottom: 50px;
               h4{
                   font-size: 18px;
               }
               span{
                   line-height: 26px;
               }
                a{
                    line-height: 30px;
                    margin-right: 10px;
                }
                p{
                    position: absolute;
                    bottom: 5px;
                    left: 0;
                    line-height: 26px;
                    max-height: 52px;
                    overflow: hidden;
                }
           }
       }
   }
</style>

